<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="./static/elementui.css">
</head>
<body style="background-color: #EBEEF5;">
    <div id="app">
        <el-row type="flex" justify="center">
            <el-col :span="6"></el-col>
            <el-col :span="8">
                <el-card class="box-card" style="margin-top: 40%;">
                    <el-form ref="form" :model="form" label-width="80px">
                        <el-form-item label="用户名">
                            <el-input v-model="form.username"></el-input>
                        </el-form-item>
                        <el-form-item label="密码">
                            <el-input v-model="form.password" show-password></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="onSubmit">立即登录</el-button>
                            <!-- <el-button>取消</el-button> -->
                        </el-form-item>
                    </el-form>
                </el-card>
            </el-col>
            <el-col :span="6"></el-col>
        </el-row>
    </div>

     <!-- import Vue before Element -->
     <script src="./static/vue.min.js"></script>
     <!-- import JavaScript -->
     <script src="./static/elementui.js"></script>
     <!-- import axios -->
     <script src="./static/axios.min.js"></script>
     <!-- import cookie -->
     <script src="./static/js.cookie.min.js"></script>
    <script>
        new Vue({
          el: '#app',
          data: function() {
            return {
                form: {
                    username: '',
                    password: ''
                }
            }
          },
          methods: {
            onSubmit() {
                axios.get('/login', {
                    params: {
                        username: this.form.username,
                        password: this.form.password
                    }
                }).then((res) => {
                        Cookies.set('login', true)
                        this.$message('登录成功！')
                        window.location.href = './index.html'
                    let data = res.data
                    if(data.code == 1) {

                    } else {
                        this.$message('登录失败！检查账号、密码！')
                    }
                })
            }
          },
        })
    </script>
</body>
</html>